<template>
     <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button type="primary" @click="router.push('/menus/create')">添加菜单</el-button>
      </div>
    </template>
    <el-table :data="allMenus" style="width: 100%">
      <el-table-column type="index" label="序号" align="center" width="180px" />
 <el-table-column prop="name" label="菜单名称" align="center" />
      <el-table-column prop="level" label="菜单层级" align="center" width="180px"/>
    <el-table-column prop="icon" label="菜单图标" align="center" /> 
    <el-table-column prop="orderNum" label="排序" align="center" /> 

    <!-- 此处作用域插槽 -->
      <el-table-column label="操作" align="center" v-slot="scope">
        <el-button type="primary" @click="router.push({ name: 'menu-edit',params:{id:scope.row.id} } )"">编辑菜单</el-button>
        <el-button type="success" @click="handleDelete(scope.row.id)">删除菜单</el-button> 
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
import { useMenus } from '@/composables/useMenus';
const {allMenus,getAllMenus,handleDelete}=useMenus()   //调用后，解构到想要得到的值
getAllMenus()



// import { getAll } from '@/api/menus';
// import type { MenuItem } from '@/api/types/menu';
// import { ElMessage } from 'element-plus';
// import { ref } from 'vue';
// // 存储返回的菜单数据
// const allMenus=ref([] as MenuItem[])
// // 获取数据的完整逻辑
// const getAllMenus=async ()=>{
//     const {data}=await getAll()
//     if(data.code === "000000"){
//         allMenus.value=data.data
//     }else{
//         ElMessage.error("获取菜单列表失败")
//         throw new Error("获取菜单列表失败")
//     }
// }
// getAllMenus()
</script>

<style scoped>
.box-card{
  width: auto;
}
</style>